<template>
	<view class="lifeexperience">
		<view class="navgation">
			<view class="navgation-box">
				<view class="left-back">
					<image src="../../static/image/top1.png" mode=""></image>
					<view class="left-back-text">
						<view class="left-back-fan" @click="back">
							<image src="/static/image/icon-fan.png" mode=""></image>
						</view>
						<view class="left-back-wen">
							<text>律师详情</text>
						</view>
					</view>
				</view>
			</view>
			<view class="navgation-box-image">
				<image src="/static/image/bottom2.png" mode=""></image>
			</view>
		</view>
		<view class="lifeexperience-bottom">
			<view class="lifeexperience-top" v-for="(item,index) in personage">
				<view class="user">
					<view class="use">
						<image :src=" '/static/image/' + item.userimage + '.png' " mode=""></image>
					</view>
					<view class="username">
						<view class="name">
							<text>{{item.name}}</text>
						</view>
						<view class="yw-ul">
							<view class="yw-li" v-for="(item,index) in speciality">
								<text>{{item.spaci}}</text>
							</view>

						</view>
					</view>
				</view>
				<view class="wescom">
					<view class="wescom-ul" v-for="(item,index) in serve">
						<view class="wescom-li">
							<view class="font-l">
								<text>{{item.amount}}</text>
							</view>
							<view class="font-h">
								<text>服务次数</text>
							</view>
						</view>
						<view class="wescom-li">
							<view class="font-l">
								<text>{{item.year}}</text>
							</view>
							<view class="font-h">
								<text>从业年限</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="xian"></view>
		<view class="information">
			<view class="information-top" v-for="(item,index) in sheax">
				<view class="information-image">
					<image src="/static/image/icon-zhuang.png" mode=""></image>
					<text>基本信息</text>
				</view>
				<view class="information-text">
					<view class="information-text-li">
						<view class="life-bj">
							<text>教育背景:</text>
						</view>
						<view class="life-fl">
							<text>{{item.education}}</text>
						</view>
					</view>
				</view>
				<view class="information-text">
					<view class="information-text-li">
						<view class="life-bj">
							<text>专业:</text>
						</view>
						<view class="life-fl">
							<text> {{item.major}}</text>
						</view>
					</view>
				</view>
				<view class="information-text">
					<view class="information-text-li">
						<view class="life-bj">
							<text>职称:</text>
						</view>
						<view class="life-fl">
							<text>{{item.honor}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="information">
			<view class="information-top" v-for="(item,index) in sheax">
				<view class="information-image">
					<image src="/static/image/icon-zhuang.png" mode=""></image>
					<text>擅长领域</text>
				</view>
				<view class="information-text">
					<view class="information-text-li">
						<view class="life-bj">
							<text>家庭婚姻:</text>
						</view>
						<view class="life-fl">
							<text>{{item.marriage}}</text>
						</view>
					</view>
				</view>
				<view class="information-text">
					<view class="information-text-li">
						<view class="life-bj">
							<text>经济纠纷:</text>
						</view>
						<view class="life-fl">
							<text> {{item.economic}}</text>
						</view>
					</view>
				</view>
				<view class="information-text">
					<view class="information-text-li">
						<view class="life-bj">
							<text>公司事务:</text>
						</view>
						<view class="life-fl">
							<text>{{item.company}}</text>
						</view>
					</view>
				</view>
				<view class="information-text">
					<view class="information-text-li">
						<view class="life-bj">
							<text>合同纠纷:</text>
						</view>
						<view class="life-fl">
							<text>{{item.contract}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personage: [{
					userimage: '',
					name: '张三律师'
				}],
				speciality: [{
						spaci: "劳务纠纷"
					},
					{
						spaci: "劳务纠纷"
					},
					{
						spaci: "劳务纠纷"
					},
				],
				serve: [{
					amount: '15412',
					year: '5'
				}],
				sheax: [{
					education: "法律硕士",
					major: "法律专业",
					honor: "",
					marriage: "",
					economic: "",
					company: "",
					contract: ""
				}]
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.lifeexperience {
		margin: 30rpx 0;
		.navgation {
			position: relative;
			.navgation-box {
				z-index: 200;
				position: fixed;
				top: 0;
				.left-back {
					image {
						width: 750rpx;
						height: 110rpx;
					}

					.left-back-text {
						display: flex;
						position: fixed;
						top: 70rpx;
						left: 30rpx;
						width: 180rpx;
						justify-content: space-between;

						.left-back-fan {
							display: flex;
							justify-content: center;
							flex-direction: column;

							image {
								width: 15rpx;
								height: 30rpx;
							}
						}

						.left-back-wen {
							display: flex;
							justify-content: center;
							flex-direction: column;

							text {
								font-size: 37rpx;
								font-family: Source Han Sans CN;
								font-weight: bold;
								color: #FFFFFF;
							}
						}
					}
				}
			}

			.navgation-box-image {
				margin-top: 110rpx;

				image {
					height: 200rpx;
					width: 750rpx;
				}
			}
		}

		.lifeexperience-bottom {
			.lifeexperience-top {
				margin-top: -90rpx;
				margin-left: 30rpx;
				width: 700rpx;

				.user {
					display: flex;

					.use {
						image {
							width: 160rpx;
							height: 160rpx;
							background: #333333;
							border-radius: 50%;
						}
					}

					.username {
						z-index: 100;
						display: flex;
						justify-content: center;
						flex-direction: column;

						.name {
							margin-left: 20rpx;
							height: 75rpx;
							margin-top: 10rpx;

							text {
								font-size: 36rpx;
								font-family: Source Han Sans CN;
								font-weight: bold;
								color: #FFFFFF;
							}
						}

						.yw-ul {
							display: flex;
							flex-wrap: wrap;
							display: flex;

							.yw-li {
								margin-left: 10rpx;
								margin-top: 10rpx;
								width: 113rpx;
								height: 36rpx;
								background: #FFFFFF;
								border: 1px solid #0099FF;
								text-align: center;
								line-height: 36rpx;
								display: flex;
								justify-content: center;

								text {
									font-size: 23rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #0073BF;
									white-space: nowrap
								}
							}
						}
					}
				}

				.wescom {
					width: 600rpx;
					margin: 0 auto;
					.wescom-ul {
						display: flex;
						justify-content: space-around;

						.wescom-li {
							padding: 20rpx;
							text-align: center;

							.font-l {
								text {
									font-size: 32rpx;
									font-family: Source Han Sans CN;
									font-weight: bold;
									color: #0073BF;
								}
							}

							.font-h {
								text {
									font-size: 28rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #999999
								}
							}
						}
					}
				}
			}
		}

		.xian {
			width: 750rpx;
			height: 7rpx;
			background: #0099FF;
			opacity: 0.34;
			border-radius: 0rpx;
		}

		.information {
			width: 700rpx;
			margin: 0 auto;
			margin-top: 40rpx;

			.information-top {
				position: relative;
				.information-image {
					image {
						width: 28rpx;
						height: 28rpx;
						position: absolute;
						margin-top: 20rpx;
					}

					text {
						font-size: 37rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
						margin-left: 10rpx;
					}
				}
			}

			.information-text {
				.information-text-li {
					display: flex;
					margin: 25rpx 50rpx;

					.life-bj {
						text {
							display: block;
							font-size: 32rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #666666;
						}
					}

					.life-fl {
						line-height: 40rpx;

						text {
							font-size: 35rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #000000;
						}
					}
				}
			}
		}
	}
</style>
